*{
  margin:0;
  padding:0;
}
main{
  display: flex;
  >div:first-child{
    padding: 0;
    width:375px;
    >img{
      width:100%;
      height:100%;
    }
  }
  >div:last-child{
    padding-bottom:20px;
    width:888px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    >.top{
      line-height: 80px;
      padding:20px;
      display: flex;
      justify-content: space-between;
      >div:first-child{
        font-size: 26px;
        font-weight: 900;
        height:80px;
        >.iconfont{
          font-size: 40px;
          color:#FF6A00;
        }
      }
      >div:last-child{
        width:355px;
        height:80px;
        display: flex;
        color:#999;
        justify-content: space-evenly;
        
        >div{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .iconfont{
            transition:0.3s;
            width:20px;
            height:20px;
            display: block;
            line-height: 20px;
          }
          &:hover{
            color:#FF6A00;
            cursor: pointer;
            >.iconfont{
             transform: rotate(180deg);
             transform-origin: center center;
            }
          }
          &:last-child{
            width:100px;
        }
        }
      }
    }
    >.middle{
      height:700px;
      >form{
        box-shadow:
  0px 0px 0.6px rgba(0, 0, 0, 0.072),
  0px 0px 1.5px rgba(0, 0, 0, 0.074),
  0px 0px 2.9px rgba(0, 0, 0, 0.068),
  0px 0px 5.1px rgba(0, 0, 0, 0.066),
  0px 0px 9.6px rgba(0, 0, 0, 0.075),
  0px 0px 23px rgba(0, 0, 0, 0.12);
        padding:40px 45px;
        width:450px;
        height:556px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin:0 auto ;
        >div:nth-child(1){
          height:41px;
          display: flex;
          align-items: center;
          cursor: pointer;
          >span{
            color:rgba(0, 0, 0, 0.4);
            width:44px;
            height:100%;
            text-align: center;
            line-height: 35px;
            font-size: 20px;
            font-weight: 900;
            box-sizing: border-box;
            margin-right: 20px;
            position: relative;
            &.active{
              color:#333;
              &::before{
                content: "";
                height:4px;
                width:44px;
                border-radius: 4px;
                background-color: #FF6A00;
                position: absolute;
                bottom:0;
                left:0;
            }
            }
          }
        }
        >div:nth-child(2),div:nth-child(4){
          position: relative;
          margin-bottom: 20px;
          >.name,.pwd{
            width:354px;
            height:60px;
            padding:30px 20px 10px;
            background-color: #f8f8f8;
            border-radius: 4px;
            font-size: 20px;
          }
          >label{
            position: absolute;
            top:20px;
            left:20px;
            color:rgba(0, 0, 0, 0.4);
            cursor: text;
          }
          >button{
            position: absolute;
            border:none;
            background-color: transparent;
            color:rgba(0, 0, 0, 0.4);
            top:20px;
            right:20px;
          }
          &.foc{
            >input{
              background-color: #fff;
              outline: 1px solid rgb(255, 92, 0);
              box-shadow: 0 0 1px rgb(255, 92, 0);
            }
          }
          &.active{
            >input{
              background-color: #FCF2F3;
            }
            >label{
              color:#F04645;
            }
          }
        }
        >span{
          display: none;
          color: #F04645;
          font-size: 12px;
          margin-bottom: 10px;
        }
        >label{
          display: flex;
          margin-bottom: 20px;
          align-items: center;
          color:rgba(0, 0, 0, 0.4);
          cursor: pointer;
          span{
            color:#333;
          }
          >input{
            height:20px;
            width:20px;
            margin-right: 4px;
          }
        }
        >button{
          border:none;
          background-color:rgb(255, 92, 0);
          opacity: .5;
          font-size: 18px;
          color:#fff;
          height:60px;
          border-radius: 5px;
        }
        >div:nth-child(8){
          display: flex;
          justify-content: space-between;
          font-size: 17px;
          color:rgb(255, 92, 0);
          cursor: pointer;
        }
        >p{
          text-align: center;
          font-size: 16px;
          color:rgba(0, 0, 0, 0.4);
        }
        >div:nth-child(10){
          display: flex;
          justify-content: space-evenly;
          padding:0 20px;
          cursor: pointer;
          >i{
            font-size: 40px;
            &:nth-child(1){
              color:#1989FA;
            }
            &:nth-child(2){
              color:#50B674;
            }
            &:nth-child(3){
              color:#18ACFC;
            }
            &:nth-child(4){
              color:#EA5D5C;
            }
          }
        }
      }
    }
    >.bottom{
      height:18px;
      text-align: center;
      font-size: 12px;
      color:#ccc;
    }
  }
}